import React from 'react'
// ===================================================================== Temp
import Controls from '#cpt/temp/Controls'
import Table from '#cpt/temp/Table'
// ===================================================================== 
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Form 		= $Lazy.hook(()=>import('@antd/form/layout/form'))
const FormItem 	= $Lazy.load(()=>import('#cpt/form/submit-item'))
const Input 	= $Lazy.load(()=>import('@antd/form/input'))
const Tabs 		= $Lazy.load(()=>import('#tp/tabs/tabs'))
const Box 		= $Lazy.load(()=>import('#tp/box/box'))
const Submit 	= $Lazy.file(()=>import('#cpt/temp/js/onSubmit'))
const IsUpload 	= $Lazy.load(()=>import('./cpt/is-upload'))
// ===================================================================== component
const names = [ 
	'原始血细胞', '原始粒细胞', '早幼粒细胞', 
	'中性粒细胞中幼', '中性粒细胞晚幼','中性粒细胞杆状核','中性粒细胞分叶核',
	'嗜酸性粒细胞中幼','嗜酸性粒细胞晚幼','嗜酸性粒细胞杆状核','嗜酸性粒细胞分叶核','嗜碱性粒细胞中幼','嗜碱性粒细胞晚幼','嗜碱性粒细胞杆状核','嗜碱性粒细胞分叶核',
	'原始红细胞','早幼红细胞','中幼红细胞','晚幼红细胞','早巨红细胞','中巨红细胞','晚巨红细胞',
	'粒：幼红比值','原始淋巴细胞','幼稚淋巴细胞','淋巴细胞','异常淋巴细胞','原始单核细胞','幼稚单核细胞',
	'单核细胞','原始浆细胞','幼稚浆细胞','浆细胞','原始巨核细胞','幼稚型巨核细胞','颗粒型巨核细胞','产板型巨核细胞',
	'裸核型巨核细胞','网状细胞','内皮细胞','组织细胞','分类不明细胞','其他异常细胞'
]
// const _search2 = { i:1, p:{type:2} } // 骨髓特征、血片特征、形态学意见

// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		index: 0,
		rs: { },
		key:0
	}
	
	model = {}
	
	myData =  names.map((name,i)=> ({ id: i, name, bone_marrow_slice:'', blood:'' }))
	rs = { bone: 0, blood: 0 }
	
	componentDidMount(){
		this.saveName = this.props.saveName + '-clinic-suggestions'
		this.setState(({ index, data, rs })=>{
			data = $fn.copy(this.myData)
			index = $fn.local(this.saveName) || 0
			rs = $fn.copy(this.rs)
			return { index, data, rs }
		})
	}
	
	componentWillUnmount(){
		$fn.remove(this.saveName)
	}
	// 动态变化
	load = result => {
		const { clinicaldiagnosis_table } = result
		
		if($fn.hasArray(clinicaldiagnosis_table)){
			this.getTotal(clinicaldiagnosis_table)
		}else{
			this.setState({ data: $fn.copy(this.myData), rs: $fn.copy(this.rs)   })
		}
		this.form.reset()
		if($fn.hasObject(result)){ this.form.setValue(result) }
	}
	// 计算总值
	getTotal = data => {
		clearTimeout(this.clear)
		data = data ? data : this.table.data()
		this.clear = setTimeout(()=>{
			const rs = { bone: 0, blood: 0 }
			this.setState(() => {
				data.forEach(v => {
					if(+v.id !== 22){
						rs.bone += +(v.bone_marrow_slice || 0)
						rs.blood += +(v.blood || 0)
					}
				})
				return { rs, data }
			})
		},200)
	}
	// 输入框
	renderInput = (text, rows, name) => {
		return (
			<div className='fxm'>
				<Input value= { text } mode='number' outer disabled={this.props.disabled} onChanged={ ({value}) => {
					rows[name] = value
					this.getTotal()
				} } />
				<span className={`ml5 ${+rows.id === 22 ? 'vh':''}`}>%</span>
			</div>
		)
	}
	
	// 表单
	cols = [
		{ title: '细胞明细', 	dataIndex: 'name', 					width:150 },
		{ title: '骨髓片', 		dataIndex: 'bone_marrow_slice', 	width:150, render: (text, rows) => this.renderInput(text, rows, 'bone_marrow_slice') },
		{ title: '血片', 		dataIndex: 'blood', 				width:150, render: (text, rows) => this.renderInput(text, rows, 'blood') },
	]

	tabsData = [
		{ title:'临床诊断', 			status:0 },
		{ title:'图形与解释', 		status:1 },
	]
	
	// 操作按钮
	controls = () => {
		return [
			Controls.click('保存', () => { this.form.submit() },{
				disabled:this.props.disabled,
				code:'F2',
				tip: () => $fn.hasArray(this.props.rows) ? true : '请先选择项目列表一条数据'
			})
		]
	}
	// 建议与解释
	onSubmit = param => {
		const { info} = this.props
		Submit.then(f => {
			const { status, result_model, uuid } = info
			f({
				msg:'保存',
				api:'result-unit-item/update',
				param:{ dmodel:result_model, status: status, uuid, content:{...param, clinicaldiagnosis_table: this.state.data} }
			})
		})
	}
	
	render(){
		const { index, rs, data } = this.state
		const { result, disabled, submitLoading, info } = this.props
		// 动态获取 kind_id [2021-7-27 4:41:04 ?F10: PM?] --伍智睿
		const _search2 = { i:1, p:{type:1, kind_id: info?.kind_category === '25002' ? info?.parent_kind_id : info?.kind_id} } // 骨髓特征、血片特征、形态学意见
		return (
			<Box style={{width:500}} flex contentClassName='fv' className='h' full loading={submitLoading}>
				<Tabs
					data={ this.tabsData }
					defaultActiveKey = { String($fn.local([ this.saveName ]) || 0) }
					onTabs = { ({ status }, index) => {
						this.setState({ index })
						$fn.local([ this.saveName ], index)
					}}
					controls = { this.controls() }
					small
				/>
				{/* 临床诊断 */}
				<div className='ex mt5 fv' style={{ display: +index === 0 ? 'flex' : 'none' }}>
					<div className='ex rel fv'>
						{
							Table.call(this, { 
								wrapStyle: {margin:'0 5px'}, 
								idStr:'id',
								data:$fn.hasArray(result?.clinicaldiagnosis_table) ? result.clinicaldiagnosis_table : data,
								hasTotal:false,
								children:(
									<dl className='fx b tc pb5 f13 w'>
										<dt className='ex'>统计</dt>
										<dd className='ex' style={{color: +rs['bone'] === 100 ? $fn.c0 : 'red'}}>{rs['bone']}</dd>
										<dd className='ex' style={{color: +rs['blood'] === 100 ? $fn.c0 : 'red'}}>{rs['blood']}</dd>
									</dl>
								)
							})
						}
					</div>
				</div>
				{/* 图形与解释 */}
				<div className='ex rel' style={{ display: +index === 1 ? 'flex' : 'none' }}>
					<div className='abs_full oys scrollbar' style={{padding:'0 10px 10px'}}>
						<Form onSubmit={this.onSubmit} className='submit-form small-form' onRef={ref=>this.form=ref}>
							<FormItem title='骨髓特征' name='bone_marrow_features' mode='textarea' disabled={disabled} form={this.form} search={_search2}/>
							<FormItem title='血片特征' name='blood_characteristics' mode='textarea' disabled={disabled} form={this.form} search={_search2}/>
							<FormItem title='形态学意见' name='morphological_opinion' mode='textarea' disabled={disabled} form={this.form} search={_search2}/>
							<IsUpload info={info} disabled={disabled} multiple />
						</Form>
					</div>
				</div>
			</Box>
		)
	}
}

export default Index